<template>
	<view class="container">
		<u-sticky>
			<u-tabs-swiper :bar-height="70" :bar-width="180" :bar-style="{backgroundColor:'#20cbd4'}"
				bg-color="#f6f6f6" active-color="#fff" inactive-color="#20cbd4" :list="sectionList"
				:current="sectionCurrent" @change="sectionChange" :is-scroll="false"></u-tabs-swiper>
			<view>
				<u-tabs ref="uTabs" :list="statusList" :current="statusCurrent" 
				@change="statusChange" :is-scroll="false" active-color="#20cbd4"></u-tabs>
			</view>
		</u-sticky>
		<swiper class="swiper" :current="swiperCurrent"  @change="handleSwperChange">
			<swiper-item v-for="(item, index) in statusList" :key="index">
				<scroll-view class="swiper" scroll-y @scrolltolower="scrolltolower">
					<view style="margin-top: 20rpx;padding: 20rpx;" v-if="isShow&&swiperCurrent==0">
						<u-search @search="search" @clear="clearGoods" @custom="search"
						bg-color="#fff" input-align="center" shape="square" placeholder="请输入内容" 
						v-model="express_no"></u-search>
					</view>
					<empty :emptyImg="emptyImg" :emptyTxt="emptyTxt" v-if="isEmpty"></empty>
					<view class="orderItem" v-if="isShow&&!isEmpty&&swiperCurrent==0" @click="orderDateil(order_item.order_id,'')"
						v-for="(order_item,order_idx) in orderList" :key="order_idx">
						<view class="orderStatus">
							<view class="order_no">No.{{order_item.order_no}}
							<text class="copy" @click.stop="onCopy(order_item.order_no)">复制</text>
							<text class="gift" v-if="order_item.seckill_id>0">(秒杀)</text>
							<text class="gift" v-if="order_item.assist_id>0">(代购)</text>
						</view>
						</view>		
						<view v-for="(goods_item,goods_idx) in order_item.goods" :key="goods_idx">
							<view class="goodsBox">
								<view class="goods_img">
									<image :src="goods_item.image"></image>
								</view>
								<view class="goods_info">
									<view class="goods_title u-line-2">{{goods_item.goods_name}}<text class="gift" v-if="goods_item.is_gift==1">(赠品)</text></view>
									<view class="goods_norms u-line-1">数量：{{goods_item.total_num}}；{{goods_item.goods_attr}}</view>
									<view class="price_box">
										<view style="margin-right: 20rpx;">¥{{goods_item.goods_price}}</view>
										<view>
											<u-tag border-color="#20cbd4" bg-color="#20cbd4" 
											color="#fff" :text="goods_item.goods_status_txt" 
											shape="circle" />
										</view>
									</view>
								</view>
							</view>
							<view class="btn_part">
								<block v-for="(btn_item,btn_idx) in goods_item.button" :key="btn_idx">
									<u-button size="mini" @click.stop="toPage(order_item.order_id,goods_item,btn_item.sign,0)" :custom-style="{background:'#20cbd4',color:'#fff',marginLeft:'10rpx'}">{{btn_item.name}}</u-button>
								</block>
							</view>
						</view>
						<view class="footer">
							<view class="footer_info">
								<view>优惠：¥{{order_item.coupon_money}}</view>
								<view>运费：¥{{order_item.express_price}}</view>
								<view v-if="order_item.order_status == 2">应付款：¥{{order_item.pay_price}}</view>
								<view v-else>实付款：¥{{order_item.pay_price}}</view>
								<view v-if="order_item.order_source == 2 || order_item.order_source == 4">券：{{order_item.points_num}}</view>
							</view>
							<view class="btn_part">
								<block v-for="(btn_item1,btn_idx1) in order_item.button" :key="btn_idx1">
									<u-button :custom-style="{marginLeft:'10rpx'}" size="mini" @click.stop="toPage1(order_item.pay_price,btn_item1.id,btn_item1.sign,order_item)">{{btn_item1.name}}</u-button>
								</block>
							</view>
						</view>
					</view>
					<view class="orderItem" v-if="isShow&&!isEmpty&&swiperCurrent!=0" 
						@click="orderDateil(order_item.order_id,'')" v-for="(order_item,order_idx1) in orderList" :key="order_idx1">
						<view class="orderStatus">
							<view class="order_no">No.{{order_item.order_no}}
							<text class="copy" @click.stop="onCopy(order_item.order_no)">复制</text>
							<text class="gift" v-if="order_item.seckill_id>0">(秒杀)</text>
						</view>
						</view>
						<view v-for="(goods_item,goods_idx) in order_item.goods" :key="goods_idx">
							<view class="goodsBox">
								<view class="goods_img">
									<image :src="goods_item.image"></image>
								</view>
								<view class="goods_info">
									<view class="goods_title u-line-2">{{goods_item.goods_name}}</view>
									<view class="goods_norms u-line-1">数量：{{goods_item.total_num}}；{{goods_item.goods_attr}}</view>
									<view class="price_box">
										<view style="margin-right: 20rpx;">¥{{goods_item.goods_price}}</view>
										<view>
											<u-tag border-color="#20cbd4" bg-color="#20cbd4" 
											color="#fff" :text="goods_item.goods_status_txt" 
											shape="circle" />
										</view>
									</view>
								</view>
							</view>
							<view class="btn_part">
								<block v-for="(btn_item,btn_idx) in goods_item.button" :key="btn_idx">
									<u-button size="mini" @click.stop="toPage(order_item.order_id,goods_item,btn_item.sign,1)" :custom-style="{background:'#20cbd4',color:'#fff',marginLeft:'10rpx'}">{{btn_item.name}}</u-button>
								</block>
							</view>
						</view>
						<view class="footer">
							<view class="footer_info">
								<view>优惠：¥{{order_item.coupon_money}}</view>
								<view>运费：¥{{order_item.express_price}}</view>
								<view v-if="order_item.order_status == 2">应付款：¥{{order_item.pay_price}}</view>
								<view v-else>实付款：¥{{order_item.pay_price}}</view>
								<view v-if="order_item.order_source == 2 ||order_item.order_source == 4">券：{{order_item.points_num}}</view>
							</view>
							<view class="btn_part">
								<block v-for="(btn_item1,btn_idx1) in order_item.button" :key="btn_idx1">
									<u-button :custom-style="{marginLeft:'10rpx'}" size="mini" @click.stop="toPage1(order_item.pay_price,btn_item1.id,btn_item1.sign,order_item)">{{btn_item1.name}}</u-button>
								</block>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" v-if="isShow&&!isEmpty" color="#909399" :margin-top="20" :margin-bottom="20"/>
					<view class="bottomline"></view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-modal v-model="show"  :show-cancel-button="true" :content="msg" @cancel="cancel" @confirm="confirm"></u-modal>
		<u-modal v-model="modalShow" :show-cancel-button="true" title="支付方式"
			:cancel-style="{color:'#909399'}" @confirm="payConfirm">
			<view class="slot-content">
				<view class="payTime">
					<view>支付剩余时间：</view>
					<view>
						<u-count-down :font-size="25" color="#909399" 
							:separator-size="25" separator-color="#909399"
						:timestamp="3000"></u-count-down>
					</view>
				</view>
				<view class="modelPrice">¥{{pay_price}}
				</view>
				<u-cell-group :border="false">					
					<u-cell-item :border-bottom="false" icon="rmb-circle-fill" :icon-style="{color:'#fece0a'}" v-if="money_pay_show && (q_id==1 || q_id==2 || q_id==3)"
					:icon-size="60" title="积分支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="yue" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<!--  #ifdef MP-WEIXIN -->
						<u-cell-item :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}" v-if="mini_show_wx && (q_id==1 || q_id==2 || q_id==3)"
						:icon-size="60" title="微信支付" :arrow="false">
							<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
								<u-radio name="weixin" :icon-size="40">
								</u-radio>
							</u-radio-group>
						</u-cell-item>
					<!-- #endif -->
					<!--  #ifdef H5 -->
						<u-cell-item :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}" v-if="h5_show_wx && (q_id==1 || q_id==2 || q_id==3)"
						:icon-size="60" title="微信支付" :arrow="false">
							<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
								<u-radio name="weixin" :icon-size="40">
								</u-radio>
							</u-radio-group>
						</u-cell-item>
						<u-cell-item :border-bottom="false" icon="zhifubao" :icon-style="{color:'#1393E8'}" v-if="h5_show_ali && (q_id==1 || q_id==2 || q_id==3)"
						:icon-size="60" title="支付宝支付" :arrow="false">
							<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
								<u-radio name="zhifubao" :icon-size="40">
								</u-radio>
							</u-radio-group>
						</u-cell-item>
					<!-- #endif -->
					<!--  #ifdef APP-PLUS -->
						<u-cell-item :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}" v-if="app_show_wx && (q_id==1 || q_id==2 || q_id==3)"
						:icon-size="60" title="微信支付" :arrow="false">
							<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
								<u-radio name="weixin" :icon-size="40">
								</u-radio>
							</u-radio-group>
						</u-cell-item>
						<u-cell-item :border-bottom="false" icon="zhifubao" :icon-style="{color:'#1393E8'}" v-if="app_show_ali && (q_id==1 || q_id==2 || q_id==3)"
						:icon-size="60" title="支付宝支付" :arrow="false">
							<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
								<u-radio name="zhifubao" :icon-size="40">
								</u-radio>
							</u-radio-group>
						</u-cell-item>
					<!-- #endif -->
				</u-cell-group>
			</view>
		</u-modal>
		<u-modal width="80%" v-model="payPwdShow" :show-title="true"
		confirm-color="#20cbd4" :show-cancel-button="true" @confirm="payYE">
			<view class="modelContent">
				<view class="accountData">
					<text>交易密码：</text>
					<u-input v-model="payPassword" type="password"
						placeholder="请输入交易密码"/>
				</view>
			</view>
		</u-modal>
		<login-model ref="loginModel"></login-model>
		<!-- <hoverMenu></hoverMenu> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	import {orderPayZfb,orderPayh5,hjWxOrderPay,orderList,orderCancle,orderReceipt,orderPay,wxminiGetOpenid,orderPayGzh,WxOrderPay} from "@/common/api.js";
	export default {
		components: {
			loginModel,
			empty,
			hoverMenu
		},
		data() {
			return {
				sectionList: [{
						name: '主推区'
					},
					{
						name: '优选区'
					},
					{
						name: '福利区'
					},
					// {
					// 	name: '超享区'
					// }
				],
				sectionCurrent: 0,
				statusList: [
					{name: '全部订单'},
					{name: '待付款'},
					{name: '待发货'},
					{name: '待收货'},
					{name: '待评价'}
				],
				statusCurrent: 0, 
				swiperCurrent: 0,
				orderList:[],
				status: 'loadmore',
				pageSize: 10,
				pageStart: 1,
				total:0,
				isEmpty:false,
				emptyImg:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/empty_goods.png",
				emptyTxt:"暂无订单",
				isShow:false,
				order_goods_id:"",
				show:false,
				msg:"",
				sign:"",
				isSearch:false,
				goodsInfo:"",
				commentType:"",//评价类型
				order_id:"",
				modalShow:false,
				payPwdShow:false,
				payPassword:'',
				payType:"yue",
				pay_price:0,
				express_no:"",
				sweixin:'',
				alipayForm:"",
				money_pay_show: 1,
				h5_show_ali: 1,
				h5_show_wx: 1,
				app_show_ali: 1,
				app_show_wx: 1,
				mini_show_ali: 1,
				mini_show_wx: 1,
				q_id:0,
			};
		},
		onLoad: function(option) {
			this.swiperCurrent = option.swiperCurrent;
			this.statusCurrent = option.swiperCurrent;
			this.sectionCurrent = option.qid?parseInt(option.qid):0;
			// #ifdef APP-PLUS
			var that= this;
			plus.share.getServices(function(s){  
				 var shares={};  
				 for (var i = 0; i < s.length; i++) {  
					 var t=s[i];  
					 shares[t.id]=t;  
				 }  
				 var sweixin=shares['weixin'];  
				 that.sweixin = sweixin
			 }, function(e){  
				 console.log("获取分享服务列表失败："+e.message);  
			 });  
			//#endif
		},
		onShow: function() {
			this.isShow = false;
			this.orderList=[];
			this.pageStart = 1;
			this.selectOrder();
		},
		onReachBottom: function() {
			
		},
		methods: {
			scrolltolower(){
				if(this.total/(this.pageStart*this.pageSize)>1){
					this.pageStart++;
					this.selectOrder();
				}else{
					this.status = 'nomore';
				}
			},
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			selectOrder(){
				orderList(this,{page:this.pageStart,limit:this.pageSize,q_id:this.sectionCurrent+1,dataType:this.statusCurrent,express_no:this.express_no});
			},
			sectionChange(index) {
				this.express_no = "";
				this.sectionCurrent = index;
				this.isShow = false;
				this.orderList=[];
				this.pageStart = 1;
				this.selectOrder();
			},
			statusChange(index) {
				this.isEmpty = false;
				this.isShow = false;
				this.swiperCurrent = index;
			},
			handleSwperChange(e){
				this.isEmpty = false;
				this.isShow = false;
				this.isSearch = true;
				this.statusCurrent = e.detail.current;
				this.swiperCurrent = e.detail.current;
				if(this.isSearch){
					this.express_no = "";
					this.isSearch = false;
					this.orderList=[];
					this.pageStart = 1;
					this.selectOrder();
				}
			},
			orderDateil(order_id){
				uni.navigateTo({
					url:"/user/order_detail?order_id="+order_id
				})
			},
			toPage(order_id,item,sign,type){
				this.order_goods_id = item.order_goods_id;
				this.order_id = order_id;
				this.commentType = type;
				if(sign == "comment"){
					this.goodsInfo = item;
					this.msg = "评价后不能再进行售后，您确定要进行评价吗？";
					this.sign = sign;
					this.show = true;
				}else if(sign == "delivery"){
					//查看物流
					uni.navigateTo({
						url:"/user/logistics?order_id="+order_id+"&type=0"
					})
				}else if(sign == "receipt"){
					//确认收货
					this.msg = "您确定要收货吗？";
					this.sign = sign;
					this.show = true;
				}
			},
			payYE(){
				uni.showLoading({
					title: '支付中...'
				});
				this.payPwdShow=false;
				var pay_pwd=this.payPassword;
				this.payPassword="";
				orderPay(this,{pay_type:'yu_e',order_id:this.order_id,pay_pwd:pay_pwd,type:0})
			},
			settle(){
				var _this = this;
				_this.modalShow=false;
				if(_this.payType=='yue'){
					if(this.payPassword==""){
						this.payPwdShow=true;
					}else{
						this.payYE();
					}
					return;
				}
				uni.showLoading({
					title: '支付中...'
				});
				// #ifdef MP-WEIXIN
				if(uni.getStorageSync("openid")==""){
					uni.getSetting({
						success: function (a) {
							uni.getUserProfile({
								desc:'Wexin',  
								success: function (b) {
									 uni.login({
									    success (res) {
											uni.hideLoading();
									        if (res.code) {
												wxminiGetOpenid(_this,{code:res.code})
									        } else {
												_this.$refs.uToast.show({title: '授权获取失败',})
									        }
									    }
									})
								}
							});
						}
					});
				}
				if(uni.getStorageSync("openid")!="" && uni.getStorageSync("openid")!="undefined"){
					orderPay(this,{pay_type:'wx_mini',order_id:this.order_id,type:0})
				}
				// #endif
				// #ifdef APP-PLUS
					if(_this.payType=='zhifubao'){
						orderPayZfb(_this,{pay_type:'ali_h5',order_id:_this.order_id,type:0})
					}else{
						//微信App支付
						//WxOrderPay(this,{pay_type:'wx_app',order_id:this.order_id,type:0})
						//汇聚App支付
						hjWxOrderPay(this,{pay_type:'wx_app',order_id:this.order_id,type:0})
					}
				// #endif
				// #ifdef H5
					let ua = window.navigator.userAgent.toLowerCase()
					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						if(_this.payType=='zhifubao'){
							uni.hideLoading();
							_this.$refs.uToast.show({title: '微信浏览器无法用支付宝支付',})
						}else{
							orderPayGzh(_this,{pay_type:'wx_chat',order_id:_this.order_id,type:0})
						}
					}else{
						if(_this.payType=='zhifubao'){
							orderPayZfb(_this,{pay_type:'ali_h5',order_id:_this.order_id,type:0})
						}else{
							orderPayh5(_this,{pay_type:'wx_h5',order_id:_this.order_id,type:0})
						}
					}
				// #endif
			},
			toPage1(pay_price ,id,sign,item){
				this.order_id = id;
				if(sign == "pay"){
					//支付
					this.pay_price = pay_price;
					this.q_id = item.order_source;				
					this.h5_show_ali = item.paystate.h5_show_ali;
					this.h5_show_wx = item.paystate.h5_show_wx;
					this.app_show_ali = item.paystate.app_show_ali;
					this.app_show_wx = item.paystate.app_show_wx;
					this.mini_show_ali = item.paystate.mini_show_ali;
					this.mini_show_wx = item.paystate.mini_show_wx;
					this.modalShow=true;
				}else if(sign == "cancel"){
					//取消订单
					this.msg = "您确定要取消此订单吗？";
					this.sign = sign;
					this.show = true;
				}else if(sign == "refund"){
					//售后
					uni.navigateTo({
						url:"/order/afterSale?order_id="+id
					})
				}else{
					uni.navigateTo({
						url:"/user/order_detail?order_id="+id
					})
				}
			},
			confirm(){
				this.show = false;
				if(this.sign == "cancel"){
					orderCancle(this,{order_id:this.order_id,type:0})
				}else if(this.sign == "receipt"){
					orderReceipt(this,{order_goods_id:this.order_goods_id,type:0})
				}else if(this.sign == "comment"){
					//去评价
					//防止特殊字符，把内容清空
					this.goodsInfo.content = "";
					uni.navigateTo({
						url:"/order/comment?goodsInfo="+JSON.stringify(this.goodsInfo)+"&order_id="+this.order_id+"&type="+this.commentType
					})
				}
			},
			cancel(){
				this.show = false;
			},
			radioChange(e) {
				this.payType = e;
			},
			payConfirm(){
				this.settle();
				return;
				//微信支付
				if(this.payType == 'weixin'){
					// #ifdef MP-WEIXIN
					orderPay(this,{pay_type:'wx_mini',order_id:this.order_id,type:0})
					// #endif
					// #ifdef APP-PLUS
					//微信App支付
					//WxOrderPay(this,{pay_type:'wx_app',order_id:this.order_id,type:0})
					//汇聚App支付
					hjWxOrderPay(this,{pay_type:'wx_app',order_id:this.order_id,type:0})
					// #endif
				}
			},
			onCopy(value){ //复制订单号
				// #ifdef H5
				var input = document.createElement('input'); // 直接构建input
				input.value = value; // 设置内容
				document.body.appendChild(input); // 添加临时实例
				input.select(); // 选择实例内容
				document.execCommand('Copy'); // 执行复制
				document.body.removeChild(input); // 删除临时实例
				uni.showToast({
					title:'复制成功~',
					icon:'none'
				})
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data:value,
					success:function(){
						uni.showToast({
							title:'复制成功~',
							icon:'none'
						})
					}
				})
				// #endif
			},
			search(){
				this.orderList=[];
				this.pageStart = 1;
				this.selectOrder();
			},
			clearGoods(){
				this.express_no = "";
				this.orderList=[];
				this.pageStart = 1;
				this.selectOrder();
			}
		}
	};
</script>
<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.swiper{
		width: 100%;
		height: calc(100vh - 160rpx - var(--window-top));
		/*padding-bottom: 80rpx;*/
	}
	.navbar{
		width: 100%;
	}
	.orderItem{
		margin: 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 15rpx;
		margin-bottom: 20rpx;
	}
	.orderStatus{
		display: flex;
		justify-content: space-between;
	}
	.order_no{
		color: #909399;
	}
	.status_txt{
		color: #20cbd4;
	}
	.goodsBox{
		margin-top: 20rpx;
		display: flex;
		align-items: stretch;
		padding-top: 20rpx;
		border-top:0.5rpx solid #E4E7ED;
	}
	.goods_img{
		width: 180rpx;
		height: 180rpx;
		margin-right: 10rpx;
	}
	.goods_img image{
		width: 100%;
		height: 100%;
	}
	.goods_info{
		width: 500rpx;
	}
	.goods_info view{
		margin-top: 10rpx;
	}
	.goods_title{
		font-size: 30rpx;
	}
	.goods_norms{
		font-size: 25rpx;
		color: #909399;
	}
	.price_box{
		display: flex;
		align-items: flex-end;
		margin-bottom: 10rpx;
		height: 50rpx;
	}
	.btn_part{
		text-align: right;
	}
	.btn_part view{
		margin-left: 20rpx;
	}
	.footer{
		border-top:0.5rpx solid #E4E7ED;
		padding-top: 10rpx;
		margin-top: 10rpx;
	}
	.footer_info{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 25rpx;
		color: #909399;
		margin-bottom: 10rpx;
	}
	.footer_info view{
		margin-left: 10rpx;
	}
	.slot-content{
		padding: 20rpx 40rpx;
	}
	.payTime{
		padding: 0 40rpx;
		color: #909399;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}
	.modelPrice{
		color: #FA3534;
		font-size: 50rpx;
		font-weight: 650;
		padding: 0 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.copy{
		font-size: 24rpx;
		color: #888;
		background-color: #eee;
		line-height: 40rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		margin-left: 30rpx;
		display: inline-block;
	}
	.u-radio{text-align: right;float:right !important}
	.gift{
		color: #fa3534;
	}
	.modelContent{
		padding: 40rpx;
	}
	.accountData{
		padding: 15rpx 0 15px 200rpx;position: relative;
	}
	.accountData text{position: absolute;left:0;top:15px;display: inline-block;width:190rpx;text-align: right;}
	.accountData .u-input{border-bottom:0.5rpx solid #222;}
	.accountData .u-input input{min-width:260rpx}
	.bottomline{
		height: 1rpx;
	}
</style>
